<template>
  <div class="baiduMap">
    <baidu-map
      :center="center"
      :zoom="zoom"
      @ready="handler"
      style="height:100%;width:80%;margin:0 auto;"
    >
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_LEFT"
      ></bm-map-type>
    </baidu-map>
  </div>
</template>
<script>
export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      src:
        "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4087042252,3305680367&fm=58&s=73F6A876C8A47E90237D87C502007024"
    };
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 116.315546;
      this.center.lat = 39.955725;
      this.zoom = 15;
    },
    toAbout() {
      window.open("http://localhost:2002/about", "_blank");
    }
  }
};
</script>
<style lang='scss' scoped>
.baiduMap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>